<template>
  <view class="container">
    <view class="into">
      <view class="text">
          <text class="txt">添加成功！</text>
      </view>
      <view class="info">
        <view class="list">
          <view class="li">
            <view class="horizontal-scroll-b">
                     <scroll-view class="vib" scroll-x="true">
                       <!-- 第三列向标题 -->
                       <view class="stb" v-for="item in TagList.slice(0,2)" :key="item.id" @click="clickTag(item)">
                         <!-- 列表项图片 -->
                         <image src="../../static/images/logo.png" class="simage"></image>
                         <!-- 列表项文字介绍 -->
                         <view class="text">
                           <view>{{ item.tag}}</view>
                           <view>{{introduce}}</view>
                         </view>
                       </view>
                     </scroll-view>
              </view>
          </view>
        </view>
        
        <view class="button">
          <button class="top">查看更多优质知识链</button>
          <button class="bottom">返回对话</button>
        </view>
      </view>
    </view>
  </view>

</template>

<script>
  import tagApi from '../../api/intro/intro.js'
  export default {
    data() {
      return {
        TagList: tagApi.introTemp,
        tagClicked: false,
      };
    },
    methods:　{
      clickTag(item){
      	console.log(item.isSelected)
        this.isScrolling = false
      	item.isSelected = true
      	this.TagTitle = item.title
      	this.introduce = item.introduce
      	this.avatar = item.avatar
      	setTimeout(()=>{
      		item.isSelected = false
          this.isScrolling = true
      	})
      },
    },
  }
</script>

<style>
	page{
		background-image: url('https://gd-hbimg.huaban.com/fbc1ecb9f833d5052e2e04c4d989429ab755aa74139c2-cTh95c_fw480webp');
		background-size: 100% 100%;
	}
</style>

<style lang="less" scoped>
.container{
  display: flex;          /* 启用flexbox布局 */
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  height: 650px;          /* 给外部view设置一个高度，以便可以垂直居中 */
  .into{
    background-color: rgba(255, 255, 255, 0.5);
    height: 320px;
    width: 250px;
    border-radius: 20px;
    .text{
      display: flex;          /* 启用flexbox布局 */
      justify-content: center; /* 水平居中 */
      align-items: center;     /* 垂直居中 */
      .txt{
        margin: 10px;
        font-size: 20px;
        color: aliceblue;
      }
    }

    .info{
      background-color: rgba(255, 255, 255, 0.5);
      height: 250px;
      width: 200px;
      border-radius: 20px;
      margin: auto;
      .list{
        display: flex;
        height: 150px;
        .li{
          .horizontal-scroll-b {
              width: 100%;
              .vib {
                display: flex;          /* 启用flexbox布局 */
              .stb {
                display: flex;
                overflow-y: auto;       /* 如果内容超出容器高度，允许垂直滚动 */
                width: 300px; /* 每个项目的宽度，根据需要调整 */
                margin-right: 10px; /* 项目之间的间隔，根据需要调整 */
                padding: 10px;
                box-sizing: border-box; /* 边框计算在宽度内 */
                border-radius: 0px;
                .simage{
                  width: 40px;
                  height: 40px;
                  margin-right: 15px;
                  border-radius: 10px;
                }
                .text{
                  color: #ffffff;
                  line-height: 1.5;
                }
              }
              }
            }
        }
      }
      .button{
        .top{
          color: aliceblue;
          font-size: 14px;
          margin: 5px 15px 5px 15px;
          border-radius: 13px;
          background-color: rgba(48, 98, 108, 0.5);
        }
        .bottom{
          color: aliceblue;
          font-size: 14px;
          margin: 5px 15px 5px 15px;
          border-radius: 13px;
          background-color: rgba(26, 55, 61, 0.5);
        }
      }
    }
  }

}
</style>

